<template>
  <div class="scroll-view">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <section v-for="(item, index) in list" :key="index">
          <div class="list" v-if="item.d === 2" @click="toDetail(item.cu)">
            <h4>{{ item.t }}</h4>
            <img :src="item.img[0]">
            <p>{{ item.o }}</p>
          </div>
          <div class="list2" v-else-if="item.d === 4" @click="toDetail(item.cu)">
            <h4>{{ item.t }}</h4>
            <div class="d-flex">
              <img v-for="(item1, index1) in item.img" :key="index1" :src="item1" class="flex-1">
            </div>
            <p>{{ item.o }}</p>
          </div>
          <div class="list3 d-flex space-between" v-else @click="toDetail(item.cu)">
            <div class="flex-2 d-flex column space-between">
              <p>{{ item.t }}</p>
              <span>{{ item.o }}</span>
            </div>
            <img :src="item.img[0]" class="flex-1">
          </div>
        </section>
    </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import md5 from 'js-md5'
import axios from 'axios'

export default {
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      list: [],
      isLoading: false, // 下拉刷新加载
      loading: false,
      ifRefresh: false, // 判断是否是下拉刷新
      finished: false
    }
  },
  methods: {
    onRefresh () {
      this.ifRefresh = true
      this.getInfoDetail()
    },
    onLoad () {
      this.ifRefresh = false
      this.getInfoDetail()
    },
    // 获取信息流详情
    getInfoDetail () {
      const aid = 'ae8e951cfdffe948'
      const pid = 'c745df837e85b7d64ccd20fd822da75e'
      const u = 'wx'
      const v = '1.0.0'
      const m = 'wx'
      const d = ''
      const t = Date.now()
      const s = md5(u + '&' + v + '&' + m + '&' + d + '&' + t + '&' + aid)
      axios({
        url: 'https://nav.gionee.com/feed/list.do',
        method: 'GET',
        params: {
          aid,
          pid,
          u,
          v,
          m,
          d,
          t,
          s,
          cid: this.id,
          size: 10,
          na: 1
        }
      }).then(res => {
        if (this.ifRefresh) {
          this.list = [...res.data.data, ...this.list]
          this.isLoading = false
        } else {
          this.list = this.list.concat(res.data.data)
          this.loading = false
          if (res.data.data.length < 5) {
            this.finished = true
          }
        }
      })
    },
    // 跳转到详情也
    toDetail (url) {
      location.href = url
    }
  }
}
</script>
<style lang="scss" scoped>
.scroll-view {
  .scroll-view-container {
    height: 100vh;
  }
  section {
    padding: 0 10px;
  }
  .data-loading {
    text-align: center;
    font-size: 16px;
    margin: 10px 0;
  }
  h4 {
    margin: 0 0 10px;
    font-size: 16px;
  }
  p {
    font-size: 12px;
    color: #ccc;
    margin-top: 10px;
  }
  .list {
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    img {
      width: 100%;
      height: 200px;
    }
    p {
      margin: 0;
    }
  }
  .list2 {
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    img {
      width: 50px;
      height: 90px;
      &:nth-child(2) {
        margin: 0 10px;
      }
    }
    p {
      margin-bottom: 0;
    }
  }
  .list3 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 10px 0;
    p {
      margin: 0;
      font-size: 16px;
      color: #000;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    span {
      font-size: 12px;
      color: #ccc;
    }
    img {
      width: 100px;
      height: 90px;
    }
  }
}
</style>
